<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <div class="orderDetail" style="position:relative;z-index:2000;width: 100vw;height:auto;background: #f5f5f5;">
    <div class="headers">
      <div class="content">
        <button class="statusBtn">{{data.status}}</button>
        <div class="time" style="width: auto;">{{data.operation_time}}</div>
        <p class="decoration">{{data.shipping_tip}} </p>
        <p style="width: 100vw;height: 1px;border-bottom: 1px solid #f5f5f5;margin-left: -4vw;margin-top: 3.3vw;margin-bottom: 3.3vw"></p>
        <div class="infomation">
          <img src="/static/img/addressRed.png" alt="">
          <span class="person" style="margin-left:3vw;float: left;">收货人：{{data.accept_name}}</span>
          <span class="tel" style="float: right;">{{data.mobile}}</span>
        </div>
        <div class="clear"></div>
        <p class="address">收货地址：{{data.address_info}}</p>
      </div>
    </div>
    <div class="goods">
      <div class="contents" v-for="(v,i) in data.goods" :key="i">
        <div class="sec">
          <a :href="'/pages/detail/main?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+v.goods_id">
            <img :src="v.img" alt="">
            <div class="text">
              <p class="name">
                <span class="goodsName">{{v.goods_name}}</span>
                <span class="types">￥{{v.real_price}}</span>
              </p>
              <p class="size" style="magrin-top:1vw;">
                <span>规格:{{v.spec_array}}</span><span style="margin-left: 2vw"></span><span class="types" style="margin-right: -13vw">×{{v.goods_nums}}</span>
              </p>
            </div>
          </a>
          <div style="width: 100vw;height: 13.33vw;">
            <div class="btn">
              <div class="seven" v-if="v.is_seven_return == 0">七天无理由退换货</div>
              <button class="nOrder" @click="afterSale" v-if="v.is_return == 1">申请售后</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="price">
      <div class="out">
        <p>应付金额 <span>￥{{data.payed_amount}}</span></p>
        <div class="line"></div>
        <p>商品总价 <span style="font-size: 15px;color: #ff4c50;">￥{{data.goods_total}}</span></p>
        <div class="line"></div>
        <p>商品优惠 <span>-￥{{data.vip_discount_price}}</span></p>
        <div class="line"></div>
        <p>运费 <span>￥{{data.shipping_fee}}</span></p>
      </div>
    </div>
    <div class="orderMes">
      <div class="out">
        <p v-if="data.order_no">订单编号：{{data.order_no}} <button type="button" @click="copyTBL">复制</button></p>
        <p v-if="data.transaction_id">交易单号：{{data.transaction_id}}<button type="button" @click="aliCopy">复制</button></p>
        <p>下单时间：{{data.order_time}}</p>
        <p v-if="data.pay_time">付款时间：{{data.pay_time}}</p>
        <p v-if="data.send_time">发货时间：{{data.send_time}}</p>
      </div>
    </div>
     <div class="footer" align="center">
      <button v-if="operate.is_comment ===1" @click="afterSale">评价</button>
      <button v-if="operate.is_confirm ===1" @click="operateOrder(3,data.order_no,queren)">确认收货</button>
      <button v-if="operate.is_deliver ===1" @click="afterSale">查看物流</button>
      <button v-if="operate.is_cancel ===1" @click="operateOrder(1,data.order_no,cancel)">取消订单</button>
      <button v-if="operate.is_delete ===1" @click="operateOrder(2,data.order_no,deletes)">删除订单</button>
      <button v-if="operate.is_to_pay ===1" style="color: #ff4c50;border:1px solid #ff4c50;" @click="gotoPay(data.payed_amount,data.order_no)">支付</button>
  </div>
    <div class="alertBox">
      <van-popup  :show="show"  @close="onClose" position="bottom" show-cancel-button
                  style="position:fixed;top: 35vw;overflow: hidden;border-radius: 2vw;">
        <alertPay :actual="orderPrice" :data="dataList" @close="close"
                  @submitOrder="submitOrder"  :order_sn="order_no" @isPay="isPay" v-if="!shows"></alertPay>
        <div v-else>
          <div style="text-align:center;padding-top: 50px" v-if="ispay">
            <img src="/static/img/mall_pay_suc@2x.png" alt="" style="width: 200px;height: 160px;">
            <p style="font-size: 16px;margin-top: 20px">支付成功</p>
            <button style="background: #ff4c50;padding: 5px 20px;color: #ffffff;margin-top: 20px;border-radius: 1.5vw" @click="toOrder">确定</button>
          </div>
          <div style="text-align:center;padding-top: 50px" v-else>
            <img src="/static/img/mall_pay_failure@2x.png" alt="" style="width: 200px;height: 160px">
            <p style="font-size: 16px;margin-top: 20px">支付失败</p>
            <button style="background: #ff4c50;padding: 5px 20px;color: #ffffff;margin-top: 20px;border-radius: 1.5vw" @click="close">确定</button>
          </div>
        </div>
      </van-popup>
      <web_view src="http://www.napin.com/download.html"></web_view>
    </div>
  </div>
</template>

<script>
  import request from '@/actions/request.js'
  import alertPay from '@/components/order/alertPay'
  export default {
    name: "orderDetail",
    components:{
      alertPay
    },
    data(){
      return{
        alertshow:false,
        alertshows:false,
        code:'',
        alipay:'',
        show:false,
        shows:false,
        data:[],
        dataList:[],
        operate:[],
        confirmBox:false,
        queren:'确认收货',
        cancel:'取消订单',
        deletes:'删除订单',
        order_no:'',
        address_id:'',
        orderPrice:'',
        radio:'',
        finishOrder:false,
        isGetMethod:true,
        ispay:true
      }
    },
    onLoad(){
      this.alipay = this.$root.$mp.query.orderNum
    },
    created(){

    },
    watch:{
      /*show(newVal,oldVal){
        if (newVal == false){
          if (finishOrder == true){
            wx.navigateTo({
              url:'../orderList/main?active=2'
            })
          }
        }
      }*/
    },
    onShow(){
      this.queren = '确认收货';
      this.cancel = '取消订单';
      this.deletes = '删除订单';
      this.order_no = '';
      this.show = false;
      this.shows = false;
      this.address_id = '';
      this.orderPrice = '';
      this.radio = '';
      this.finishOrder = '';
      this.isGetMethod = true;
    },
    methods:{
      gotoPay(price,order_no){
        this.show = !this.show;
        let datas = wx.getStorageSync("returnArr");
        this.address_id = datas.data.address.address_id;
        this.order_no = order_no;
        this.orderPrice = price;
        if(this.isGetMethod){
          request.getListPayMethod('api/pay/getPayMethod','post',{},{},true,this);
        }
      },
      submitOrder(radio){
        request.getPay('api/shop/getPay','post',{
          pay_id:radio,
          order_sn:this.order_no,
          wx_openid:wx.getStorageSync('openid'),
        },{},true,this)
      },
      toOrder(){
        wx.navigateTo({
          url:'../orderList/main?active=2'
        })
      },
      onClose() {
        this.show=false;
      },
      close(){
         console.log(123);
         this.show = !this.show;
      },
      cancelDialog(){
        this.confirmBox = !this.confirmBox;
      },
      toDownload(){
        wx.navigateTo({
          url:'http://www.napin.com/download.html',
        })
      },
      operateOrder(type,orderNum,text){
        wx.showModal({
          content: '是否确定'+text,
          success: function(res) {
            if (res.confirm) {
              request.cancelOrder('api/user/operateOrder','post',{
                order_no:orderNum,
                type:type
              },{},true,this);
            } else if (res.cancel) {
              console.log('取消')
            }
          }
        })
      },
      afterSale(){
        /*wx.showModal({
          content: '是否确定'+text,
          success: function(res) {
            if (res.confirm) {
              request.cancelOrder('api/user/operateOrder','post',{
                order_no:orderNum,
                type:type
              },{},true,this);
            } else if (res.cancel) {
              console.log('取消')
            }
          }
        })*/
      },
      isPay(res){
        // this.show=!this.show;
        this.alertshows=true;
        this.ispay=res;
      },
      close(){
        /* this.alertshow = !this.alertshow;*/
      },
      copyTBL:function(e){
        var self=this;
        wx.setClipboardData({
          data: self.data.order_no,
        });
      },
      aliCopy: function () {
        var self=this;
        wx.setClipboardData({
          data: self.data.transaction_id,
        });
      },
    },
    mounted(){
      request.orderDetail('api/user/orderInfo','post',{
        order_no: this.alipay,
      },{},true,this);
    }
  }
</script>

<style scoped lang="scss">
  .statusBtn{
    position:relative;
    padding:0;
    display:inline-block;
    height:34px;
    line-height:32px;
    border-radius:2px;
    box-sizing:border-box;
    font-size:16px;
    text-align:center;
    vertical-align:middle;
    -webkit-appearance:none;
    -webkit-text-size-adjust:100%;

  }
  .clear{clear:both}
  .footer{
    width: 100vw;
    height: 9.33vw;
    background: #fff;
    margin-top: 4vw;
    padding-top: 3.3vw;
    button{
      width: 16vw;
      height: 6vw;
      font-size: 12px;
      color: #666;
      line-height: 6vw;
      text-align: center;
      border:1px solid #666 ;
      border-radius: 4vw;
      background: none;
      margin: 0 1vw 0 1vw;
      float: right;
      padding:0;

    }
  }
  .orderMes{
    width: 100vw;
    height: auto;
    background: #fff;
    margin-top: 4vw;
    .out{
      width: 92vw;
      height: 100%;
      margin:0px auto;
      p{
        width: 100%;
        height: 8vw;
        line-height: 8vw;
        color: #666;
        font-size: 12px;
        button{
          width:13.33vw;
          height: 4.67vw;
          float: right;
          background: none;
          border: 1px solid #333;
          color: #333;
          border-radius: 1.5vw;
          line-height: 4.67vw;
          text-align: center;
          margin-top: 1.17vw;
          font-size: 13px;
          padding: 0;
        }
      }
    }
  }
  .price{
    width: 100vw;
    height: auto;
    background: #fff;
    .out{
      width: 92vw;
      height: 100%;
      margin:0px auto;
      .line{
        width: 100vw;
        height: 1px;
        border-bottom: 1px solid #f5f5f5;
        margin-left: -4vw;
      }
      p{
        width: 100%;
        height: 12vw;
        line-height: 12vw;
        font-size: 13px;
        color: #333;
        span{
          float: right;
        }
      }
    }
  }
  .goods{
    margin-top: 4vw;
    .contents{
      width: 100vw;
      height: auto;
      background: #fff;
      padding-top: 4vw;
      border-bottom: 4vw solid #f5f5f5;
      .btn{
        float: right;
        margin-top: 5vw;
        .seven{
          font-size: 11px;
          display: inline-block;
          width: 32vw;
          text-align: center;
          height: 4.34vw;
          line-height: 4.34vw;
          margin-right: 4vw;
          color: #ff4c50;
          border-radius: 4vw;
          border: 1px solid #ff4c50;
        }
        .popup{
          width: 70vw;
          height: 30vw;
          -webkit-border-radius: 1vw;
          -moz-border-radius: 1vw;
          border-radius: 1vw;
          div{
            margin: 3vw;
            button{
              border: 1px solid #f5f5f5;
              margin-right: 1vw;
              margin-top: 10vw;
              background: #f5f5f5;
              color: #333;
              border-radius: 3px;
            }
            .no{
              float: right;
              margin-right: 10%;
            }
            .yes{
              float: left;
              margin-left: 10%;
            }
          }
        }
        .nOrder{
          width:18.67vw;
          height: 6vw;
          line-height: 6vw;
          text-align: center;
          background: #fff;
          border-radius: 4vw;
          margin-right: 4vw;
          font-size: 14px;
          padding: 0;
          border: 1px solid #666;
          color: #666;
        }
        .pay{
          border: 1px solid #ff4c50;
          color: #ff4c50;
        }
        button{
          width:18.67vw;
          height:5vw;
          line-height:5vw;
          text-align:center;
          background:#fff;
          border-radius:4vw;
          margin-right:4vw;
          display:inline-block;
          position:relative;
          top:1.4vw;
        }
      }
      .sec{
        width: 100vw;
        height:30vw;
        line-height:6.67vw;
        .text{
          float: right;
          padding-top: 3vw;
          width: 73vw;
          p{
            height: 5vw;
            .types{
              float: right;
              color: #FF4C50;
              font-size: 13px;
              margin-right: 4vw;
            }
          }
          .size{
            font-size: 12px;
            color: #666;
          }
          .name{
            font-size: 13px;
            color: #333;

            .goodsName{
              width: 41vw;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              display: inline-block;
            }
          }
        }
        img{
          width: 20vw;
          height: 20vw;
          float: left;
          margin-left: 4vw;
          margin-top: 2.67vw;
          border-radius: 3px;
        }
      }

    }
  }
  .headers{
    width: 100vw;
    height:auto;
    padding-bottom: 3vw;
    background: #fff;
    .content{
      width: 92vw;
      height: 100%;
      margin: 0px auto;
      padding-top: 5.33vw;
      overflow: hidden;
      .address{
        font-size:15px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(102,102,102,1);
        margin-top: 5.3vw;
      }
      .infomation{
        span{
          font-size: 15px;
          color: #333;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          line-height: 5.3vw;
        }
        img{
          width: 5vw;
          height: 5.3vw;
          float: left;
        }
      }
      .decoration{
        width: 92vw;
        height:auto;
        font-size:15px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(51,51,51,1);
        margin-top: 4vw;
      }
      .time{
        width:26.67vw;
        height:4.3vw;
        background:rgba(245,245,245,1);
        border-radius:4vw;
        float: right;
        margin-top: 2.3vw;
        color: #333;
        font-size: 11px;
        text-align: center;
        line-height: 4.3vw;
      }
      button{
        width:21.33vw;
        height:8vw;
        background:rgba(255,76,80,1);
        box-shadow:0px 6px 10px 0px rgba(118,118,118,0.3);
        border-radius:6px;
        color: #fff;
      }
    }

  }
</style>
<style lang="scss">
  .orderDetail{
    .van-popup--bottom {
      width:73%;
      top:auto;
      bottom:43vw;
      border-radius: 3vw;
      right:auto;
      left:50%;
      overflow: hidden;
    }
  }
  .van-toast--text{
    z-index: 999999 !important;
  }
  .orderDetail{
  .van-button{
    height:34px;
    line-height:32px;
  }
  }
</style>

